<script setup>
/* eslint-disable */
import { onMounted, ref, computed } from 'vue'

import { useIntervalFn } from '@vueuse/core'
import PCanvas from '@/comps/PCanvas'
import PPicker from '@/comps/PPicker'
import { colorMapper, formatToShortAddress } from '@/helpers'
import { post, get } from '@/request.js'
import html2canvas from 'html2canvas';

// ref variables
const color = ref('green')
const count = ref('..')
const address = ref('')
const canvasRef = ref(null)
const image = ref(null)
const isShow = ref(null)
const dialogVisible = ref(false)
const inputValue = ref("")

// color
const value = computed(() => colorMapper[color.value])

// count
const nextMintCount = async () => {
  const addr = localStorage.getItem('address')
  if(addr){
    address.value = addr
  }
}
onMounted(nextMintCount)
useIntervalFn(nextMintCount, 1000)

// address
const getAddress = async (words) => {
  const data = {
    "words": words
  }
  const res = await post('user/address', data)
  address.value = res.data
  localStorage.setItem('address', res.data)
}


const connectToWallet = (words) => {

  getAddress(words)
}

const quit = () => {
  localStorage.removeItem('address')
  address.value = ''
}
const createNFT = async () => {
  const nftId = localStorage.getItem('nftId')
  let img = null
  html2canvas(canvasRef.value).then(canvas => {
        image.value = canvas.toDataURL('image/png');
        canvas.toBlob(file => {
          img = file
          const data = new FormData()
          data.append("address", address.value)
          data.append('nftId', localStorage.getItem('nftId'))
          data.append('img', img)
          post('nft/nft', data, {
            headers: {
            'Content-Type': 'multipart/form-data',
          },
          }).then(res => {
            console.log(res)
            // 上链信息反馈
            if(res.data.result.success == true){
              alert("You have successfully generate the NFT.")
            }else{
              alert("fail"+res.data.result.error.message)
            }      
            location.reload()
            console.log(res)
          })
      })
    });
 
}
const showDialog = () => {
        dialogVisible.value = true;
      }
const closeDialog = () => {
        dialogVisible.value = false;
        inputValue.value = ''
      }
const submit = () => {
        connectToWallet(inputValue.value)
        closeDialog();
      }

</script>

<template>
  <div>
    <header>
      <div class="wallet">
        <button v-if="address" class="connect-wallet-btn" @click="quit()">{{address}}</button>
        <button v-else @click="showDialog()" class="connect-wallet-btn">Connect Wallet</button>
      </div>
      <address></address>
    </header>

    <div class="next-mint-countdown">{{count}} changes until next NFT mint</div>
    <div v-if="image">
    <img :src="image" alt="Captured Image">
   </div>
    <div class="artboard">
      <div :class="{[color]: true}">
        <div ref="canvasRef" style="width: 100%; height: 100%;">
          <PCanvas :value="value" />
        </div>
        <PPicker v-model="color" />
        <button @click="createNFT">生成NFT</button>
      </div>
    </div>
    
    <div id="app">
      <div v-if="dialogVisible" class="dialog">
        <div class="dialog-content">
          <p>请输入助记词</p>
          <input type="text" v-model="inputValue" />
          <button @click="submit">提交</button>
          <button @click="closeDialog">关闭</button>
        </div>
      </div>
    </div>

  </div>
</template>

<style>
  body {
    margin: 0;
    font-family: monospace;
    background-color: #fff;
  }

  header {
    display:flex;
    justify-content:space-between;
  }

  header .wallet .address,
  header .bidding-holder,
  header .connect-wallet-btn {
    margin-left: 15px;
    background: #ddd;
    padding: 10px;
    border-radius: 10px;
  }

  header .connect-wallet-btn {
    border: none;
    margin-top: 1em;
    cursor: pointer;
    font-family: monospace;
  }

  header .bidding-holder {
    margin-top: 1em;
    margin-right: 1em;
  }

  header .bidding-holder--offline {
    color: rgba(0,0,0,0.5);
  }

  header .bidding-holder--offline button:disabled {
    color: rgba(0,0,0,0.5);
    cursor: default;
  }

  .next-mint-countdown {
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    margin-top: 12px;
    padding-top: 10px;
    z-index: -1;
  }

  .contract {
    text-align: center;
    margin-top: 12px;
    position: absolute;
    bottom: 16px;
    width: 100%;
  }

  .artboard {
    width: 200px;
    height: 250px;

    position: absolute;
    top: 50%;
    left:50%;
    margin: -125px 0 0 -100px;
  }

  .bid-button {
    color: black;
    border: none;
    border-radius: 5px;
    padding: 6px 8px;
    cursor: pointer;
    top: 10px;
    right: 10px;
    background: #ccc;
    font-family: monospace;
    border-radius: 0;
    margin-top: 10px;
  }

  .selected-color {
    margin-top: 20px;
    text-align: center;
  }
  .dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .dialog-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    background-color: white;
    padding: 20px;
  }

  .color, .color-picker {cursor: pointer;}
  .red .color-picker:hover { background-color: red; opacity:1;}
  .orange .color-picker:hover { background-color: orange; opacity:1;}
  .yellow .color-picker:hover { background-color: yellow; opacity:1;}
  .green .color-picker:hover { background-color: green; opacity:1;}
  .blue .color-picker:hover { background-color: blue; opacity:1;}
  .indigo .color-picker:hover { background-color: indigo; opacity:1;}
  .violet .color-picker:hover { background-color: violet; opacity:1;}
  .white .color-picker:hover { background-color: white; opacity:1;}
  .grey .color-picker:hover { background-color: grey; opacity:1;}
  .black .color-picker:hover { background-color: black; opacity:1;}
</style>
